<template>
	<div>
		<div class="headerbox">
			<div class="headerinfo">
				<div>供应商入驻</div>
				<div class="loginbox" @click="tologin()">登录</div>
			</div>
		</div>
		<div class="logonbox">
			<div class="whitesbox">
				<div class="progress">
					<div class="itempro">
						<img class="actimg" src="../assets/image/20.png" />
						<!-- <div>基本信息</div> -->
					</div>
					<div class="tit"></div>
					<div class="itempro" v-if="type==2||type==3">
						<img class="actimg" src="../assets/image/20.png" />
						<!-- <div>指定联系人信息</div> -->
					</div>
					<div class="itempro" v-else>
						<img class="unactimg" src="../assets/image/20.png" />
						<!-- <div>指定联系人信息</div> -->
					</div>
					<div class="tit"></div>
					<div class="itempro" v-if="type==3">
						<img class="actimg" src="../assets/image/20.png" />
						<!-- <div>公司基本情况</div> -->
					</div>
					<div class="itempro" v-else>
						<img class="unactimg" src="../assets/image/20.png" />
						<!-- <div>公司基本情况</div> -->
					</div>
				</div>
				<div class="titpro">
					<div>基本信息</div>
					<div :style="{'color':type==2||type==3?'#4065E0':'#555555'}">指定联系人信息</div>
					<div :style="{'color':type==3?'#4065E0':'#555555'}">公司基本情况</div>
				</div>
				<!-- 基本信息 type等于1 -->
				<div class="infobox" v-if="type==1">
					<div class="namebox">
						<img class="classimg" src="../assets/image/22.png" />
						<div>基本信息</div>
					</div>
					<div>
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px"
							class="demo-ruleForm">
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 50px;">
										<el-form-item label="账号" prop="username">
											<!-- <input class="inputbox" /> -->
											<el-input v-model="ruleForm.username" placeholder="设置账号"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="密码" prop="password">
											<!-- <input class="inputbox" /> -->
											<el-input v-model="ruleForm.password" placeholder="设置密码"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司名称" prop="work_name">
											<!-- <input class="inputbox" /> -->
											<el-input v-model="ruleForm.work_name" placeholder="输入公司名称"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司法定代表人姓名" prop="legal_person">
											<!-- <input class="inputbox" /> -->
											<el-input v-model="ruleForm.legal_person" placeholder="请输入法定代表人姓名"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<!-- <el-form-item label="公司注册地区选择" prop="address_arr"> -->
											<el-form-item label="公司注册地区选择" prop="address_arr">
												<el-cascader style="width: 100%" ref="cascader" v-model="ruleForm.address_arr" :props="props" 
												clearable  placeholder="请选择地区"></el-cascader>
											</el-form-item>
											<!-- <el-select v-model="ruleForm.register_address" filterable placeholder="请选择">
												<el-option v-for="item in options" :key="item.value" :label="item.label"
													:value="item.value">
												</el-option>
											</el-select> -->
										<!-- </el-form-item> -->
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司邮政编码" prop="postal_code">
											<el-input placeholder="请输入公司邮政编码" v-model="ruleForm.postal_code"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<!-- <el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div>
										<el-form-item label="公司办公地区选择" prop="work_address">
											<el-select v-model="ruleForm.name" filterable placeholder="请选择">
												<el-option v-for="item in options" :key="item.value" :label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
										</el-form-item>
									</div>
								</el-col>
							</el-row> -->
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司办公地址详情" prop="work_address">
											<!-- <input class="inputbox" /> -->
											<el-input placeholder="请输入公司办公地址详情" v-model="ruleForm.work_address"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司联系电话" prop="work_mobile">
											<!-- <input class="inputbox" /> -->
											<el-input type="number" placeholder="请输入公司联系电话" v-model="ruleForm.work_mobile"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司电子邮箱" prop="work_email">
											<el-input placeholder="请输入公司电子邮箱" v-model="ruleForm.work_email"></el-input>
											<!-- <input class="inputbox" /> -->
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司网址" prop="work_site">
											<el-input  placeholder="请输入公司网址" v-model="ruleForm.work_site"></el-input>
											<!-- <input class="inputbox" /> -->
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex">
								<div class="nextbox" @click="submitForm('ruleForm')">下一步</div>
								<!-- <el-form-item>
									<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
									<el-button @click="resetForm('ruleForm')">重置</el-button>
								</el-form-item> -->
							</el-row>
						</el-form>
					</div>
				</div>
				<!-- 联系人信息 -->
				<div class="infobox" v-if="type==2">
					<div class="namebox">
						<img class="classimg" src="../assets/image/23.png" />
						<div>联系人信息</div>
					</div>
					<div>
						<el-form :model="ruleForm" :rules="lxrules" ref="ruleForm" label-width="150px"
							class="demo-ruleForm">
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 50px;">
										<el-form-item label="联系人姓名" prop="lx_name">
											<!-- <input class="inputbox" /> -->
											<el-input  placeholder="请输入联系人姓名" v-model="ruleForm.lx_name"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="联系人职务" prop="lx_work">
											<!-- <input class="inputbox" /> -->
											<el-input placeholder="请输入联系人职务" v-model="ruleForm.lx_work"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<!-- <el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="联系人办公地区选择" prop="lx_address">
											<el-select v-model="ruleForm.address" filterable placeholder="请选择">
												<el-option v-for="item in options" :key="item.value" :label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
										</el-form-item>
									</div>
								</el-col>
							</el-row> -->
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="联系人办公地址详情" prop="lx_address">
											<!-- <input class="inputbox" /> -->
											<el-input  placeholder="请输入联系人办公地址详情" v-model="ruleForm.lx_address"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="联系人电话" prop="lx_mobile">
											<!-- <input class="inputbox" /> -->
											<el-input type="number"  placeholder="请输入联系人电话" v-model="ruleForm.lx_mobile"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="联系人电子邮箱" prop="lx_email">
											<!-- <input class="inputbox" /> -->
											<el-input placeholder="请输入联系人电子邮箱" v-model="ruleForm.lx_email"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex">
								<div class="lastbox" @click="type = 1">上一步</div>
								<div class="nextbox" @click="xlsubmitForm('ruleForm')">下一步</div>
							</el-row>
						</el-form>
					</div>
				</div>
				<!-- 公司基本情况 -->
				<div class="infobox" v-if="type==3">
					<div class="namebox">
						<img class="classimg" src="../assets/image/27.png" />
						<div>公司基本情况</div>
					</div>
					<div>
						<el-form :model="ruleForm" :rules="surerules" ref="ruleForm" label-width="150px"
							class="demo-ruleForm">
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司成立日期" prop="work_time">
											<el-date-picker
												v-model="ruleForm.work_time"
												type="date"
												placeholder="选择日期">
											</el-date-picker>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 50px;">
										<el-form-item label="公司性质" prop="work_ment">
											<el-radio-group v-model="ruleForm.work_ment">
												<el-radio v-for="item in judicialaid" :key="item.id" :label="item.id">
												{{ item.title }}
												</el-radio>
											</el-radio-group>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="申请入库分类" prop="rk_cate">
											<el-select v-model="ruleForm.rk_cate" placeholder="请选择">
												<el-option v-for="item in catetype" :key="item.id" :label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司经营范围" prop="jy_scope">
											<el-input placeholder="请输入公司经营范围" v-model="ruleForm.jy_scope"></el-input>
											<!-- <el-select v-model="ruleForm.jy_scope" filterable placeholder="请选择">
												<el-option v-for="item in options" :key="item.value" :label="item.label"
													:value="item.value">
												</el-option>
											</el-select> -->
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司资质等级情况" prop="work_level">
											<!-- <input class="inputbox" /> -->
											<el-input  placeholder="请输入公司资质等级情况" v-model="ruleForm.work_level"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司人数" prop="people_num">
											<!-- <input class="inputbox" /> -->
											<el-input type="number" placeholder="请输入公司人数" v-model="ruleForm.people_num"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="公司占地面积" prop="area">
											<!-- <input class="inputbox" /> -->
											<el-input  type="number"  placeholder="请输入公司占地面积(平方)" v-model="ruleForm.area"></el-input>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="营业执照" prop="license">
											<!-- <el-upload-image v-model="ruleForm.license" :multiple="false" :limit="1"></el-upload-image> -->
											<div v-if="ruleForm.license" class="imageShow">
												<img :src="ruleForm.license" class="avatar">
												<!-- <img src="../assets/image/10.png" class="guanbi" @click="ruleForm.license = ''"> -->
											</div>
											<el-upload v-else class="avatar-uploader" action="/api/Upload/upload"
												:on-success="handlelicense" :show-file-list="false">
												<div class="icon_box">
													<img src="../assets/image/24.png" style="width: 74px;height: 84px;cursor: pointer;">
													<span
														style="font-size: 16px;font-family: Source Han Sans CN;font-weight: 500;color: #CED0D6;">请点击上传</span>
												</div>
											</el-upload>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex" :gutter="10">
								<el-col :span="16">
									<div style="margin-top: 20px;">
										<el-form-item label="身份证" prop="id">
											<div style="display: flex;">
												<div style="margin-right: 30px;">
													<!-- <el-upload-image v-model="ruleForm.card_front" :multiple="false" :limit="1"></el-upload-image> -->
													<div v-if="ruleForm.card_front" class="imageShow">
														<img :src="ruleForm.card_front" class="avatar">
														<!-- <img src="../assets/image/10.png" class="guanbi" @click="ruleForm.card_front = ''"> -->
													</div>
													<el-upload v-else class="avatar-uploader" action="/api/Upload/upload" :on-success="handleAvatarSuccess"
														:show-file-list="false">
														<div class="icon_box" style="margin: 30px 0 0 50px;">
															<img src="../assets/image/25.png" style="width: 106px;height: 77px;cursor: pointer;">
															<span
																style="font-size: 16px;font-family: Source Han Sans CN;font-weight: 500;color: #CED0D6;">请点击上传身份证正面</span>
														</div>
													</el-upload>
													
												</div>
												<div>
													<div v-if="ruleForm.card_side" class="imageShow">
														<img :src="ruleForm.card_side" class="avatar">
														<!-- <img src="../assets/image/10.png" class="guanbi" @click="ruleForm.card_side = ''"> -->
													</div>
													<el-upload v-else class="avatar-uploader" action="api/Upload/upload"
														:on-success="handlecard_side" :show-file-list="false">
														<div class="icon_box" style="margin: 30px 0 0 50px;">
															
															<img src="../assets/image/25.png" style="width: 106px;height: 77px;cursor: pointer;">
															<span
																style="font-size: 16px;font-family: Source Han Sans CN;font-weight: 500;color: #CED0D6;">请点击上传身份证反面</span>
														</div>
													</el-upload>
													<!-- <el-upload-image v-model="ruleForm.card_side" :multiple="false" :limit="1"></el-upload-image> -->
												</div>
											</div>
											
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<el-row type="flex">
								<div class="lastbox" @click="type = 2">上一步</div>
								<div class="nextbox" @click="sureinfo('ruleForm')">确认</div>
							</el-row>
						</el-form>
					</div>
				</div>
				<div style="height: 100px;"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import {  post,imghttp } from "@/assets/js/http.js";
	let area_arr_length = 0;
	export default {
		data() {
			return {
				catetype:[],//入库分类列表
				type: 1, //1为基本信息，2为指定联系人信息，3为公司基本情况
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}],
				value: '',
				judicialaid: [{id:1,title:'国有企业'}, {id:2,title:'私营企业'}, {id:3,title:'外资企业'}, {id:4,title:'合资企业'},
				{id:5,title:'其他'}],
				ruleForm: {
					work_name:'',
					legal_person:'',
					register_address:'',
					work_address:'',
					postal_code:'',
					work_mobile:'',
					work_email:'',
					work_site:'',
					lx_name:'',
					lx_work:'',
					lx_address:'',
					lx_mobile:'',
					lx_email:'',
					work_ment: '',
					work_time: '',
					rk_cate: '',
					jy_scope:'',
					work_level:'',
					people_num:'',
					area:'',
					license:'',
					address_arr:[],
					card_front:'',
					card_side:'',
				},
				rules: {
					work_name:[{required: true,message: '请输入',trigger: 'blur'}],
					legal_person:[{required: true,message: '请输入',trigger: 'blur'}],
					name: [{required: true,message: '请输入',trigger: 'blur'},],
					address_arr: [{required: true,message: '请选择',trigger: 'change'},],
					work_address:[{required: true,message: '请输入',trigger: 'blur'},],
					postal_code:[{required: true,message: '请输入',trigger: 'blur'},
						],
					work_mobile:[{required: true,message: '请输入',trigger: 'blur'},
					{min: 11,max: 11,message: "请输入11位手机号",trigger: "blur",},],
					work_email:[
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
					work_site:[{required: true,message: '请输入',trigger: 'blur'},],
					username: [{ required: true,message: '请输入',trigger: 'blur'},
					{min: 6,max: 15,message: "账号长度需6 ~ 15位",trigger: "blur",
					},{pattern: /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,15}$/,
							message: "账号必须由数字、字母组成、长度在6-15位之间",trigger: "blur",},],
					password: [{ required: true,message: '请输入',trigger: 'blur'},
					{min: 6,max: 32,message: "密码长度需6 ~ 32位",trigger: "blur",
					},{pattern: /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,32}$/,
							message: "密码必须由数字、字母组成、长度在6-32位之间",trigger: "blur",},],
				},
				lxrules: {
					lx_name:[{required: true,message: '请输入',trigger: 'blur'},],
					lx_work:[{required: true,message: '请输入',trigger: 'blur'},],
					lx_address:[{required: true,message: '请输入',trigger: 'blur'},],
					lx_mobile:[{required: true,message: '请输入',trigger: 'blur'},
					{min: 11,max: 11,message: "请输入11位手机号",trigger: "blur",},],
					lx_email:[
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
				},
				surerules: {
					work_ment:[{required: true,message: '请选择',trigger: 'change'},],
					work_time:[{required: true,message: '请选择',trigger: 'change'},],
					rk_cate:[{required: true,message: '请选择',trigger: 'change'},],
					jy_scope:[{required: true,message: '请选择',trigger: 'change'},],
					work_level:[{required: true,message: '请输入',trigger: 'blur'},],
					people_num:[{required: true,message: '请输入',trigger: 'blur'},],
					area:[{required: true,message: '请输入',trigger: 'blur'},],
					license:[{required: true,message: '请输入',trigger: 'blur'},],
					card_front:[{required: true,message: '请输入',trigger: 'blur'},],
					card_side:[{required: true,message: '请输入',trigger: 'blur'},],
				},
				props: {
					label: "name",
					value: "id",
					lazy: true,
					async lazyLoad(node, resolve) {
						const { level, value } = node;
						console.log(level, value)
						if (level === 0) {
							const result = await post({
								url: "/api/common/getProvinceList",
								data: {},
							});
							resolve(result);
						} else if (level === 1) {
							const result = await post({
								url: "/api/common/getCityList",
								data: {
									province_id: value,
								},
							});
							resolve(result);
						} else if (level === 2) {
							const result = await post({
								url: "/api/common/getAreaList",
								data: {
									city_id: value,
								},//area_arr_length
							});
							if (area_arr_length === 3) {
								result.forEach((item) => (item.leaf = true));
							}
							resolve(result);
						} else if (level === 3) {
							const result = await post({
								url: "/api/common/getStreetList",
								data: {
									area_id: value,
								},
							});
							result.forEach((item) => (item.leaf = true));
							console.log(result, "result");
							resolve(result);
							// if (area_arr_length === 4) {
							// }
						}
					},
				},
			};
		},
		
		components: {
			// "el-upload-image": () => import("@/components/el-upload-image.vue"),
		},
		mounted() {
			this.getcatelist()
		},
		methods: {
			submitForm(formName) {
				console.log(this.ruleForm,'formName')
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// alert('submit!');
						this.type = 2
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			xlsubmitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// alert('submit!');
						this.type = 3
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//分类列表
			async getcatelist(){
				await post({
					url:'/api/Upload/cate'
				}).then(res=>{
					this.catetype = res
					// console.log(this.catetype)
				})
			},
			//注册
			sureinfo(formName) {
				this.ruleForm.work_time = Math.round(new Date(this.ruleForm.work_time).getTime() / 1000)
				console.log(this.ruleForm,this.ruleForm.work_time)
				this.$refs[formName].validate((valid) => {
					if (valid) {
						post({
							url:'/admin/customer.RegisterSupplier/register_supplier',
							data:this.ruleForm
						}).then(res=>{
							console.log(res)
							this.$router.push('/login')
						})
						// alert('submit!');
						// this.type = 3
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//登录
			tologin(){
				this.$router.push('/login')
			},
			// 上传图片
			updataImg(e) {
				let formData = new FormData();
				formData.append("file", e.file);
				console.log(formData.get('file'))
				imghttp({
					url: "/api/Upload/upload",
					data: formData,
				}).then((res) => {
					this.ruleForm.license = res.data
					console.log(res)
				});
			},
			handleAvatarSuccess(res, file) {
				this.ruleForm.card_front = URL.createObjectURL(file.raw);
				this.ruleForm.card_front = res.data.file.full_url
				console.log(this.ruleForm.card_front,'this.ruleForm.card_front',res.data.file.full_url)
			},
			handlecard_side(res, file){
				this.ruleForm.card_side = URL.createObjectURL(file.raw);
				this.ruleForm.card_side = res.data.file.full_url
			},
			handlelicense(res, file){
				this.ruleForm.license = URL.createObjectURL(file.raw);
				this.ruleForm.license = res.data.file.full_url
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style scoped>
	.headerbox {
		width: 100%;
		height: 60px;
		background: #FFFFFF;
	}

	.headerinfo {
		width: 1268px;
		height: 60px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #707070;
	}

	.loginbox {
		width: 71px;
		height: 28px;
		background: linear-gradient(90deg, #409EFF 0%, #4065E0 100%);
		box-shadow: 0px 3px 6px 1px rgba(64, 101, 224, 0.22);
		border-radius: 6px;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 28px;
		cursor: pointer;
	}

	.logonbox {
		background-color: #F2F3F5;
		width: 100%;
		padding: 20px 0;
	}

	.whitesbox {
		width: 1268px;
		background: #FFFFFF;
		margin: 0 auto;
	}

	.progress {
		display: flex;
		align-items: center;
		height: 111px;
		justify-content: center;
		font-size: 18px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #555555;
	}

	.itempro {
		/* width: 100px; */
		text-align: center;
	}

	.actimg {
		width: 70px;
		height: 70px;
	}

	.unactimg {
		width: 38px;
		height: 38px;
	}

	.tit {
		width: 430px;
		height: 4px;
		background: #DEEEFF;
	}

	.titpro {
		width: 1050px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 18px;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #4065E0;
	}

	.infobox {
		margin: 60px 0 0 60px;
	}

	.namebox {
		display: flex;
		align-items: center;
		font-size: 18px;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #4065E0;
	}

	.classimg {
		width: 32px;
		height: 32px;
		margin-right: 10px;
	}

	.inputbox {
		width: 594px;
		height: 56px;
		background: #FFFFFF;
		border-radius: 9px 9px 9px 9px;
		opacity: 1;
		border: 1px solid #E1E1E1;
		margin-top: -13px;
	}

	.nextbox {
		width: 446px;
		height: 56px;
		background: linear-gradient(270deg, #4065E0 0%, #409EFF 100%);
		border-radius: 9px 9px 9px 9px;
		font-size: 18px;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 56px;
		cursor: pointer;
		margin-left: 200px;
		margin-top: 60px;
	}

	.lastbox {
		width: 136px;
		height: 56px;
		border-radius: 9px 9px 9px 9px;
		border: 1px solid #4065E0;
		font-size: 18px;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #4065E0;
		text-align: center;
		line-height: 56px;
		cursor: pointer;
		/* margin-left: 200px; */
		margin-top: 60px;
	}
	.avatar-uploader{
		width: 252px;
		height: 178px;
		background: #FFFFFF;
		border-radius: 9px 9px 9px 9px;
		opacity: 1;
		border: 1px solid #E1E1E1;
	}
	.avatar{
		width: 252px;
		height: 178px;
	}
	.icon_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 30px 0 0 85px;
	}

	/* ::v-deep.el-input--small .el-input__inner {

		background: none;

	} */
</style>
